<template>
  <div>
    <!-- 按钮 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning" size="small">警告按钮</el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    <hr />

    <!-- 图标 -->
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <hr />

    <!-- 布局 -->
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
    <hr />

    <!-- 日期选择器 -->
    <el-date-picker
      v-model="value1"
      type="date"
      value-format="yyyy-MM-dd"
      size="small"
      placeholder="选择日期"
    >
    </el-date-picker>
    <hr />

    <!-- 文件上传 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <hr />

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border stripe >
      <el-table-column label="日期" width="100" prop="date"/>
      <el-table-column label="姓名" width="180" prop="name"/>
      <el-table-column label="地址" prop="address" width="250"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" >删除</el-button >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      fileList: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleDelete(user){
        console.log(user)
    },
    handleEdit(user){
        console.log(user)
    }
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>